<template>
  <a-row :gutter="[16, 16]">
    <a-back-top>
      <div class="ant-back-top-inner">UP</div>
    </a-back-top>
    <a-col :span="24" style="background-color: #fff; padding: 20px">
      <a-col :span="24">
        <a-row>
          <a-col :span="20">
            <strong class="title"
              >标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</strong
            >
          </a-col>
          <a-col :span="4">
            <a-tag color="pink">pink</a-tag>
            <a-tag color="red">red</a-tag>
            <a-tag color="orange">orange</a-tag>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row :gutter="[8, 0]">
          <a-col :span="2">
            <a-image
              :width="50"
              :height="50"
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            ></a-image>
          </a-col>
          <a-col :span="22">
            <a-row :gutter="[8, 8]" style="color: #ccc">
              <a-col :span="24">
                <strong>作者：xxxxx</strong>
              </a-col>
              <a-col :span="4">平台：新浪</a-col>
              <a-col :span="6">时间2023年3月31号 12:00:00</a-col>
              <a-col :span="6">信息分类:政治事务-社会保障</a-col>
              <a-col :span="4">有害分类:取治安 </a-col>
              <a-col :span="4">相似猜件: 233</a-col>
            </a-row>
          </a-col>
          <a-col :span="22" :offset="2">
            <span
              style="
                color: rgb(131 125 125);
                background-color: rgb(204 204 204 / 26%);
              "
              ><disconnect-outlined />https//mn.umelxn.qg.onm/s/GbpHGSDyaBdt2Y.YsBA</span
            >
          </a-col>
        </a-row>
      </a-col>
    </a-col>
    <a-col :span="24" style="background-color: #fff">
      <div class="top-text">文小</div>
      <a-col style="background-color: #fff; padding: 20px">
        核酸检测采样能力大帽提升、检测进度与质量能力大幅提升、流行病学调查与洪源能力大帽提升、精准施救能力大怪提升、组织能力和社会治理能力大幅提升.....4月3日下午，瑞丽市召开疫情专家媒体见面会，省疾控中心党委书记左仕高、省疾控中心疫苗临床研究中心主任刘晓强、省疾控中心急性传染病防制所所长伏晓庆、京州医科大学第一附属医院呼吸与危重症医学科主任享薇等专家针对本次疫情进行”精准会诊”。防制所所长伏晓庆、京州医科大学第一附属医院呼吸与危重症医学科主任李薇等专家针对本次疫情进行“精准会诊”。
        生态兴，文明兴。良好生态环境是人和社会持续发展的基础，建设生态文明是关系人民槽址、关系民族未来的大计，“十三五”以来，云南坚持以习近平生态文明思想和习近平总书记考察云南重要讲话精神为指引。
      </a-col>
    </a-col>
    <a-col :span="24" style="background-color: #fff">
      <div class="top-text">图文分析</div>
      <a-row :gutter="[32, 32]">
        <a-col :span="24">
          <a-row :gutter="[16, 16]">
            <a-col :span="6">
              <div class="left-img">
                <a-image
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                ></a-image>
              </div>
            </a-col>
            <a-col :span="18">
              <a-row>
                <a-col :span="24">
                  <div>
                    <div class="left-text">OCR文字</div>
                    <div class="content-box">
                      <div class="content-text">
                        <a-button
                          type="primary"
                          shape="round"
                          style="width: 100%"
                          >《云南换象》演出团以解败</a-button
                        >
                      </div>
                      <div class="content-text">
                        <a-button
                          type="primary"
                          shape="round"
                          style="width: 100%"
                          >舞蹈艺术家杨丽汗宣布</a-button
                        >
                      </div>
                      <div class="content-text">
                        <a-button
                          type="primary"
                          shape="round"
                          style="max-width: 100%"
                          >这是比较长的识别别文字内客，舞蹈艺术激张三星接着这是比较长的识别别文字内客</a-button
                        >
                      </div>
                    </div>
                  </div>
                </a-col>
                <a-col :span="24">
                  <div>
                    <div class="left-text">关键赖特征识别</div>
                    <div class="content-box">
                      <div class="content-text">
                        <a-button
                          type="primary"
                          shape="round"
                          style="width: 100%"
                        >
                          人物识别 3
                        </a-button>
                      </div>
                      <div class="content-text">
                        <a-button
                          type="primary"
                          shape="round"
                          style="width: 100%"
                        >
                          有出场景 3
                        </a-button>
                      </div>
                      <div class="content-text">
                        <a-button
                          type="primary"
                          shape="round"
                          style="width: 100%"
                          >有害物品 3</a-button
                        >
                      </div>
                      <div class="content-text">
                        <a-button
                          type="primary"
                          shape="round"
                          style="width: 100%"
                          >票证识别 3</a-button
                        >
                      </div>
                    </div>
                  </div>
                </a-col>
              </a-row>
              <!-- <div class="tuwen-item"> -->
              <!-- <div class="tuwen-item-right"> -->

              <!-- <div class="tuwen-item-footer"> -->
              <a-row :gutter="[16, 16]">
                <a-col :span="4">
                  <div>
                    <a-image
                      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                    ></a-image>
                    <div>洪水</div>
                    <a-tag color="cyan">日然夹害</a-tag>
                  </div>
                </a-col>
                <a-col :span="4">
                  <div>
                    <a-image
                      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                    ></a-image>
                    <div>洪水</div>
                    <a-tag color="cyan">暴力</a-tag>
                  </div>
                </a-col>
                <a-col :span="4">
                  <div>
                    <a-image
                      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                    ></a-image>
                    <div>洪水</div>
                    <a-tag color="cyan">赌博</a-tag>
                  </div>
                </a-col>
              </a-row>

              <!-- </div> -->
              <!-- </div> -->
              <!-- </div> -->
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return {};
  },
});
</script>
<style lang="scss" scoped>
.title {
  font-size: 20px;
}
.top-text {
  padding: 20px 20px 8px 20px;
  border-bottom: 1px solid #ccc;
  color: #1890ff;
  margin-bottom: 10px;
}

.left-text {
  position: relative;
  &::before {
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 4px;
    height: 50%;
    background: #1890ff;
  }
}
.content-box {
  display: flex;
  align-items: center;
  overflow: hidden;
  // flex-direction: row;
  flex-wrap: wrap;
  & .content-text {
    flex-grow: 1;
    padding: 5px 20px;
    margin: 6px;
  }
}
.tuwen-item {
  display: flex;
  align-content: center;
  &-right {
    margin-left: 30px;
    flex: 1;
  }
  &-footer {
    display: flex;
    align-items: center;
    & > div {
      flex: 1;
    }
  }
}
.ant-back-top {
  bottom: 100px;
}
.ant-back-top-inner {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 4px;
  background-color: rgba(124, 132, 238, 0.5);
  color: #fff;
  text-align: center;
  font-size: 20px;
}
.left-img{
  width: 100%;
  height: 100%;
  background: rgb(206, 203, 203,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
